<!--
流程主界面
-->

<template>
  <div class="activiti-manage">
    <table-search @searchBack="serachTableData">
      <Button type="primary" @click="createBpmn">新增</Button>
    </table-search>
    <div class="table-content">
      <Table :columns="columns" height="520" :data="tableData"></Table>
    </div>
    <div class="foot-center">
      <Page :total="page.total"
            :current="page.current"
            :page-size="page.size"
            @on-change="pageChange"
            @on-page-size-change="sizeChange"
            show-sizer
            show-total/>
    </div>
    <Modal
      v-model="modal.show"
      :title="modal.title"
      :width="modal.width"
      :styles="{top:'30px'}"
      scrollable
      @on-cancel="closeModal"
      class="modal-area"
      footer-hide
    >
      <div class="modal-h85">
        <activiti-setting
          v-if="currentProcess.deploymentId||this.modal.type==='add'"
          @deploy-back="closeModal"
          :currentProcess="currentProcess"
        ></activiti-setting>
      </div>

    </Modal>
  </div>
</template>

<script>
import * as API from "@/api/bpmn-api";
import tableSearch from "_c/table-components/table-search"
import activitiSetting from "@/view/activiti/activiti-setting"

export default {
  components: {
    tableSearch,
    activitiSetting
  },
  data() {
    return {
      modal: {
        show: false,
        title: "",
        type: ""
      },
      currentProcess: {},
      serachName: "",
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '流程名称',
          align: "center",
          key: 'name'
        },
        {
          title: '流程主键',
          align: "center",
          key: 'key'
        },
        {
          title: '版本信息',
          align: "center",
          key: 'version'
        },
        {
          title: '操作',
          align: "center",
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.viewBpmn(params.row, 'view')
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.viewBpmn(params.row, 'edit')
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removeDefinition(params.row)
                  }
                }
              }, '删除')
            ]);
          }
        },
      ],
      tableData: [],

    };
  },
  methods: {

    //跳页事件
    pageChange(page) {
      this.page.current = page
      this.getDefinitionData()
    },
    //改变每页显示条数
    sizeChange(size) {
      this.page.current = 1
      this.page.size = size
      this.getDefinitionData()
    },

    //搜索事件
    serachTableData(value) {
      this.serachName = value
      this.page.current = 1
      this.getDefinitionData()
    },

    //关闭弹窗
    closeModal(){
      this.currentProcess.deploymentId=null;
      this.modal.type=null;
      this.modal.show=false;
      this.modal.title="";
      this.getDefinitionData()
    },

    //绘制流程图
    createBpmn() {
      this.modal.show = true
      this.modal.title = "绘制流程图"
      this.modal.type = "add"
      this.modal.width = "90%"
    },

    //删除流程部署
    removeDefinition(row) {
      this.$Modal.confirm({
        title: '删除确认',
        content: '<p>已审核过的流程将会收到影响，是否确认删除该流程？</p>',
        onOk: () => {
          API.delDefinition({
            deploymentId: row.deploymentId
          }).then(res => {
            if (res.code === "0") {
              this.$Message.success(res.msg)
              this.getDefinitionData()
            }
          })
        },
        onCancel: () => {
        }
      });
    },

    //获取流程定义列表
    getDefinitionData() {
      API.getDefinitions({
        page: this.page,
        name: this.serachName
      }).then(res => {
        if (res.code === "0") {
          this.tableData = res.data.records
          this.page.total = parseInt(res.data.total)
        }
      })
    },


    //查看、编辑流程图
    viewBpmn(row, type) {
      this.currentProcess = Object.assign({}, row)
      this.currentProcess.isView = type === 'view'
      this.modal.show = true
      this.modal.title = type === 'view'?"查看流程图":"绘制流程图"
      this.modal.width = "90%"
    },

  },
  created() {
    this.getDefinitionData()
  }
};
</script>

<style lang="less" scoped>
.activiti-manage {
  width: 100%;

  .table-content {
    padding: 10px;
    text-align: center;
  }
}
</style>
